<template>
  <div id="shopCart">
    <!-- 购物车列表 -->
    <div class="mui-card" v-for="v in goodsList" :key="v.id">
      <div class="mui-card-content">
        <div class="mui-card-content-inner cart-content">
          <!-- 开关 -->
          <mt-switch
            v-model="objChecked[v.id]"
            @change="changeChecked($event, v.id)"
          ></mt-switch>
          <img src="../../images/menu1.png" alt="" />
          <div class="goods_info">
            <h3 class="goods_info_title">{{ v.title }}</h3>
            <div class="goods_info_desc">
              <span class="price">¥{{ v.sell_price }}</span>
              <cart-num-box
                class="shop_numbox"
                :count="objCount[v.id]"
                :cartId="v.id"
              ></cart-num-box>
              <span class="del" @click="del(v.id)">删除</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 结算 -->
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner total_content">
          <div class="total">
            <div class="total_title">总计(不含运费)</div>
            <div class="total_info">
              已勾选商品<span style="color:red;"> {{ totalCheckedCount }} </span>件, 总价
              <span style="color:red;"> ¥ {{ totalCheckedPrice }} </span>
            </div>
          </div>
          <mt-button type="danger" size="normal">去结算</mt-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 一、导入注册数字框组件
import CartNumBox from "../sub-components/CartNumBox.vue"
// 二、按需导入store实例方法
import { mapGetters, mapMutations, mapState } from "vuex"

export default {
  components: { CartNumBox },
  data() {
    return {
      value: true,
      // 商品列表
      goodsList: []
    }
  },
  methods: {
    // 三、根据商品的id拼接出逗号分割的字符串,然后获取购物车数据
    async getShopCarList() {
      // 3.1 判断是否有id
      if (!this.cart.length) return
      // 3.2 拼接id
      const idStr = this.cart.map(item => item.id).join(",")
      // console.log(idStr)
      // 3.3 发送请求
      const { data } = await this.$http(`/api/goods/getshopcarlist/${idStr}`)
      if (data.status === 0) {
        // console.log(data)
        this.goodsList = data.message
      }
    },

    // 四、获取store中 mutations 的删除、更新选中状态的方法
    ...mapMutations(["delCart", "updataChecked"]),

    // 五、删除对应项
    del(id) {
      // 5.1 视图上删除数据
      this.goodsList = this.goodsList.filter(item => item.id !== id)
      // 5.2 store 实例中删除数据
      this.delCart(id)
    },

    // 六、修改checkbox选中状态后,同步修改store中的相应数据的状态
    changeChecked(e, id) {
      // console.log(e, id)
      this.updataChecked({ isChecked: e, id })
    }
  },
  computed: {
    // 2.1 映射获取购物车列表计算属性
    ...mapState(["cart"]),
    // 2.2 获取store中的 getters 计算属性
    ...mapGetters(["objCount", "objChecked", "totalCheckedCount", "totalCheckedPrice"])
  },
  created() {
    this.getShopCarList()
  }
}
</script>

<style lang="scss" scoped>
#shopCart {
  background-color: #ccc;
  overflow: hidden;
  img {
    width: 60px;
    height: 60px;
    margin: 0 10px;
  }
  .cart-content {
    display: flex;
    .goods_info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 100%;
    }
  }
  .goods_info_desc {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .price {
      color: red;
      font-size: 15px;
    }
    .del {
      color: blue;
    }
  }
  .goods_info_title {
    font-size: 14px;
  }
  .total_content {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .total {
    line-height: 30px;
  }
  .shop_numbox {
    height: 30px;
  }
}
</style>
